<template>
	<view class="body">
		<myHead :title="title" />
		<scroll-view scroll-y="true" class="scroll-Y" style="height: 80%;">
		 <uni-forms :value="task" ref="form" label-position="top">
		            <uni-forms-item label="执行人" posion="top" >
						<span class="text">{{task.executorUser}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="任务总结" posion="top" >
						<uni-easyinput required="true" type="textarea"disabled="" v-model="task.taskContent" />
		            </uni-forms-item>
		            <uni-forms-item label="预期时间">
						<span style="display: block;">{{task.futureTime}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="完成时间">
						<span style="display: block;">{{task.updateTime}}</span>
		            </uni-forms-item>
					
					<uni-forms-item label="任务照片" >
						<uni-grid :column="5" :showBorder="false"  :square="false" >
						    <uni-grid-item  v-for="(file,file_index) in task.files" :key="file_index" @click="watchImg" >
						       <image v-if="file.isimg" :src="file.url.replace('http://112.124.6.140:8090','/api')"
								mode=""></image>
								<p>{{file.fileName}}</p>
							</uni-grid-item>
						</uni-grid>
					</uni-forms-item>
					
					<uni-forms-item :label="'评分: '+task.monitorScore">
						<span style="display: block;">
							<uni-rate :readonly="true"  :max="5" :value="task.monitorScore/task.taskScore*5" allow-half />
						</span>
					</uni-forms-item>
					<uni-forms-item label="督察文件" v-if="task.moni_files">
						<uni-grid :column="5" class="files"  :showBorder="false"  @change="watchupload" :square="false" >
							<uni-grid-item class="content"  v-for="(item,file_index) in task.moni_files" :key="file_index">
								<view >
									<image :src="item.url.replace('http://112.124.6.140:8090','/api')" mode=""></image>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-forms-item>
					<uni-forms-item :label="'组长评分: '+taskScore">
						<span style="display: block;">
							<uni-rate  :max="5" :value="inputScore" allow-half @change="scorechange" />
						</span>
					</uni-forms-item>
					<uni-forms-item label="评论" posion="top" >
						<uni-easyinput required="true" v-model="leadRejectReason" type="textarea" placeholder="如不同意督察分数,请在此给原因"  />
					</uni-forms-item>
		        </uni-forms>
				</scroll-view>
				<button style="width: 95%;margin:0 auto" @click="submitForm" class="mtb-20 bg-red text-white" >提交</button>
	</view>
</template>

<script>
	import myHeader from '../components/head.vue'
	// import {monitorMeetingTask} from '@/api/api_party_meeting.js'
	import {getTaskDetail,monitorLeaderList,monitorMeetingTask,monitorLeaderMeetingTask} from '@/api/api_party_task.js'
	
	export default {
		name: "child",
		props: {
			meetingId: {
			   type: Number,
			   default: 1,
			}
		},
		data() {
			return {
			title: "详情",
			filesupload:[],
				meeting:{
				},
				meetingTaskId:'',
				taskScore:5,
				inputScore:5,
				leadRejectReason:'',
				task:{
				        "meetingTaskId": 6,
				        "meetingId": 4,
				        "workFileId": null,
				        "taskName": "喜欢啥地方",
				        "createUser": null,
				        "taskStatus": 2,
				        "executorUser": "系统管理员",
				        "taskEndTime": "2021-06-05",
				        "futureTime": "2021-01-02T00:00:00",
				        "taskScore": 55,
				        "monitorLead": null,
				        "leadRejectReason": null,
				        "monitorUserScore": null,
				        "monitorUser": "系统管理员",
				        "monitorScore": null,
				        "monitorEndTime": null,
				        "taskCreateTime": "2021-06-01",
				        "updateTime": "2021-06-05",
				        "taskContent": "我任务做完了",
				        "files": [
				        ]
				      },
				
			}
		},
		components: {
			myHead: myHeader,
		},
		onLoad(ars) {
			let _this = this
			this.meetingTaskId = Number.parseInt(ars.meetingTaskId)
			getTaskDetail({
				taskId:this.meetingTaskId
			}).then(res=>{
				console.log(res)
				_this.taskScore = res.taskScore
				_this.task = res
				_this.task.exe_files = []
				_this.task.moni_files = []
				_this.task.exe_files = res.files.filter(res=>res.fileType===0)
				_this.task.moni_files = res.files.filter(res=>res.fileType===1)
			})	
		},
		methods: {
			scorechange(e){
				console.log(e)
				this.taskScore = e.value/5*this.task.taskScore
			},
			// 获取上传状态
			chooseImg(){
				let _this = this
				uni.chooseImage({
					count:5-_this.filesupload.length,
					success:(res)=>{
						let parma = [];
						console.log(res)
						res.tempFilePaths.forEach((e, index) => {
							parma.push({
								name: "files",
								file: res.tempFiles[index],
								url: e,
							})
						})
						let token = uni.getStorageSync("AuthToken");
						uni.uploadFile({
							url: '/api/uploadMultipleFiles', //仅为示例，非真实的接口地址
							name: 'files',
							files: parma,
							header: {
								'x-access-token': token
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data)
								_this.filesupload.push(...(JSON.parse(uploadFileRes.data)
									.data)) //添加
							},
							fail: res => {
								console.log(res)
							}
						});
					},
					fail: (res) => {
						console.log(res)
					},
				})
			},
			loadImg(arr){
				console.log(11111)
				uni.previewImage({
				            urls: arr,
				            longPressActions: {
				                itemList: ['发送给朋友', '保存图片', '收藏'],
				                fail: function(err) {
				                  uni.showToast({
				                  	title:'图片加载出错',
									duration:2000,
									icon:'none'
				                  })
				                }
				            }
				        });
			},
			watchImg(e){
				console.log(e)
				let _this = this 
				// file.url.replace('http://112.124.6.140:8090','/api')
				let url =_this.task.exe_files.map(res=>res.url)
				// file.url.replace('http://112.124.6.140:8090','/api')
				console.log(url)
				uni.previewImage({
				     urls: url,
				     longPressActions: {
				     itemList: ['发送给朋友', '保存图片', '收藏'],
				},
				complete: (res) => {
				console.log(res)	
				}
			})
		},
		watchupload(e){
			let _this = this 
			// file.url.replace('http://112.124.6.140:8090','/api')
				let url =_this.task.moni_files.map(res=>res.url)
			console.log(url)
			uni.previewImage({
			     urls: url,
			     longPressActions: {
			     itemList: ['发送给朋友', '保存图片', '收藏'],
			},
			complete: (res) => {
			console.log(res)	
			}
		})
	},submitForm(){
		let _this = this
		uni.showModal({
			title:"提示",
			content:'确定提交吗？',
			success: (res) => {
				if(res.confirm){
				monitorLeaderMeetingTask(
				{
					"meetingTaskId": _this.meetingTaskId,
					taskContent:_this.taskContent ,
					monitorScore:_this.taskScore
				}
					).then(res=>{
						uni.showToast({
							title:"提交成功",
							duration:2000,
							success: (res) => {
								uni.navigateBack()
							}
						})
					})
				}
			}
		})
	}
		}
	}
</script>
<style lang="scss" scoped>
	
	/**
	 * 定义按钮样式
	 */
	@mixin button-commit {
	  background: linear-gradient(180deg, #ff5e59, #e20909);
	  color: #fff;
	}
	
	/deep/ uni-button {
		@include button-commit;
	}
	.headerbutton{
		width: 100%;
		height: 100%;
	}
	.body{
		height: 100%;
		background-color:#f1f1f1 ;
		/deep/ .uni-forms{
			padding-bottom: 12px;
			.uni-forms-item{
				padding: 0 12px;
				background-color: #FFFFFF;
				.uni-forms-item__content{
					.uni-grid-wrap{
						.uni-grid{
							.uni-grid-item{
								// margin: 0 2.5px;
								margin: 0 0.5%;
								p{
									font-size: 12px;
									width: 120upx;
									position: absolute;
									top: 70%;
									background-color: rgba(0,0,0,0.4);
									color: #FFF;
									overflow:hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									-o-text-overflow:ellipsis;
									
								}
								.uni-grid-item__box{
									border: 1px #e5e5e5 solid;
								}
								uni-image{
									max-width: 120upx;
									max-height: 120upx;
								}
							}
						}
					}
				}
				.uni-forms-item__label{
					.label-text{
					>span{
						font-size: 14px;
						color: #999999;
					}	
					}
				}
				.uni-forms-item__inner{
					padding-bottom: 0px;
				}
			}
		}
		/deep/ .uni-collapse{
			.uni-card{
				margin: 0px;
				.first{
					position: absolute;
					top: 65.5%;
					left: 300upx;
				}
				.second{
					position: absolute;
					bottom: 17.5%;
					left: 300upx;
				}
				.photos1{
					position: absolute;
					top: 33%;
					right: 0px;
					.uni-grid{
						justify-content: flex-end;
					}
				}
				.photos2{
					position: absolute;
					top: 60%;
					right: 0px;
					.uni-grid{
						justify-content: flex-end;
					}
				}
			}
		.uni-grid-wrap{
				width: 40%;
			.uni-grid-item{
				width: 20% !important;
				uni-image{
					width: 50upx;
					height: 50upx;
				}
			}
		}
		
		}
	}
	.body{
		/deep/ .uni-grid{
			.uni-grid-item{
				width: 120upx !important;
				height: 120upx !important;
				margin: 1%;
				span{
					width: 20px;
					height: 20px;
					background-color: #e20909;
					color: #FFF;
					text-align: center;
					border-radius: 50%;
					position: absolute;
					position: absolute;
					right: 1px;
					top: 1px;
				}
				uni-image{
				width: 120upx;
				height: 120upx;
				}
			}
		}
	}
</style>
